<template>
	<div class="hello">
		<div class="page1">
			<div class="header">
				<div class="nav">
					<div class="logo">
						<img :src="logo">
					</div>
					<div class="nav-info">
						<a href="#">下载App</a>
						<a href="#">
							<van-icon name="search" />
						</a>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="postre">
					<img :src="postre">
				</div>
				<div class="info">
					<h1>日系 | 那些唱功极佳的声优们</h1>
					<span>#日语</span>
					<span>#动漫</span>
				</div>
				<div class="song">
					<ul>
						<li v-for="item in song" :key="item.id">
							<div class="picture">
								<img :src="item.url">
							</div>
							<div class="song-info">
								<div class="info-top">
									<i v-show="item.isShow">VIP</i>
									<span>{{item.song}}</span>
								</div>
								<div class="info-bot">
									<span>{{item.name}}</span>
								</div>
							</div>
							<div>
								<span class="song-span">{{item.time}}</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="btn">
					<div class="btn-content">
						<div class="btn-left">
							<div class="download">
								<van-icon name="down" />
								<span>下载</span>
							</div>
							<div class="collect">
								<van-icon name="star-o" />
								<span>收藏</span>
							</div>
						</div>
						<div class="btn-right">
							<van-icon name="play" />
							<span>播放全部</span>
						</div>
					</div>
					<div class="player">
						<div class="player-content">
							<div class="player-left">
								<span>暂无歌曲播放</span>
							</div>
							<div class="player-right">
								<span></span>
								<span></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
export default {
  data(){
	return{
		logo:require('../assets/z-qqyy/Album1/1.png'),
		postre:require('../assets/z-qqyy/SongList5/1.jpg'),
		icon:require('../assets/z-qqyy/Album1/3.jpg'),
		song:[
			{url:require("../assets/z-qqyy/SongList5/2.jpg"),song:"Tiny Light",name:"鬼頭明里",time:"04:50",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/3.jpg"),song:"なんでもないや(movie ver.)",name:"鬼頭明里",time:"05:49",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/4.jpg"),song:"LIVE for LIFE ～狼たちの夜～",name:"愛美",time:"04:28",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/5.jpg"),song:"そのままでいいんだよ",name:"久保ユリカ",time:"04:07",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/6.jpg"),song:"youthful beautiful",name:"内田真礼",time:"04:35",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/7.jpg"),song:"美しき残酷な世界",name:"日笠陽子",time:"04:53",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/8.jpg"),song:"天使にふれたよ!",name:"久保ユリカ",time:"04:41",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/9.jpg"),song:"わんだふるワールド",name:"竹達彩奈",time:"04:40",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/10.jpg"),song:"Oh! My Hero!",name:"なみこ",time:"04:17",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/11.jpg"),song:"ハナコトバ",name:"讃州中学勇者部",time:"04:18",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/12.jpg"),song:"やくそく",name:"なみこ",time:"05:33",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/13.jpg"),song:"昔からある場所",name:"ユキ(CV:花澤香菜)",time:"05:13",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/14.jpg"),song:"五等分の気持ち",name:"ユキ(CV:花澤香菜)",time:"03:42",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/15.jpg"),song:"TEMPEST",name:"石原夏織",time:"03:47",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/16.jpg"),song:"シゴトオワリ。",name:"宮古新",time:"04:00",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/17.jpg"),song:"Hi-Fi-Highway→",name:"なみこ",time:"04:29",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/18.jpg"),song:"CALL MY NAME ONLY FOR YOU",name:"琥珀 (CV:土岐隼一)",time:"04:14",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/19.jpg"),song:"約束",name:"下野紘",time:"04:15",isShow:true,
			},
			{url:require("../assets/z-qqyy/SongList5/20.jpg"),song:"あなたの声",name:"日笠陽子",time:"04:41",isShow:true},
			{url:require("../assets/z-qqyy/SongList5/21.jpg"),song:"放課後ティータイム",name:"愛美",time:"04:47",isShow:true},
		]
	}
  }
}
</script>

<style scoped>
  .hello{
	background-color: #fff;
  }
  /* 头部 */
  .header{
	width: 100%;
	height: 2.173853rem;
	position: fixed;
	z-index: 999;
	background-color: #fff;
	border-bottom: .5px solid #e0e0e0;
  }
  .nav{
	height: 2.173853rem;
	padding: 0 .799573rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .logo{
	width: 100%;
	height: auto;
  }
  .logo img{
	width: 2.4rem;
	height: auto;
  }
  .nav-info{
	width: 5rem;
  }
  .nav-info a:first-child{
	display: inline-block;
	width: 1.5rem;
	height: .799893rem;
	background-color: #e61723;
	border-radius: .053304rem;
	line-height: .799893rem;
	padding: 0 .266524rem;
	font-size: .373134rem;
	color: #fafafa;
  }
  .nav-info a:nth-child(2) i{
	font-size: .692963rem;
	margin-left: .4rem;
	vertical-align: middle;
  }
  /* 内容 */
  .content{
	padding-top: 2.158848rem;
  }
  .postre,.postre img{
	width: 100%;
	height: 100%;
  }
  .info{
	padding: .799573rem;
  }
  .info h1{
	color: #333;
	font-size: .479744rem;
	line-height: .76759rem;
	margin-bottom: .266524rem;
  }
  .info span{
	color: #585858;
	font-size: .266524rem;
	font-weight: 700;
	margin-right: .159914rem;
  }
  .name{
	margin-top: .399786rem;
  }
  .name img{
	width: .337819rem;
	height: .337819rem;
	border-radius: 50%;
	margin-right: .186567rem;
	vertical-align: top;
  }
  .name span{
	font-size: .266524rem;
	font-weight: 300;
  }
  .song{
	padding: 0 .799573rem 2.209488rem .799573rem;
	margin-bottom: 2.665245rem;
  }
  .song ul{
	border-top: .5px solid #eee
  }
  .song ul li{
	border-bottom: .5px solid #eee;
    padding: .266524rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .picture{
	margin-right: .313992rem;
  }
  .picture img{
	width: 1.207702rem;
	height: 1.207702rem;
  }
  .song-info{
	flex: 1 1 0%;
  }
  .info-top i{
	display: inline-block;
	background: #af9c7c;
    color: #fff;
    border-radius: .373134rem;
    font-size: .319829rem;
    padding: .039978rem .106609rem;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
	margin-right: .133262rem;
  }
  .info-top span{
	font-size: .319829rem;
    font-weight: 700;
	display: inline-block;
  }
  .info-bot{
	font-size: .319829rem;
	font-weight: 300;
	margin-top: .186567rem;
  }
  .song-span{
	font-size: .373134rem;
	color: #333333;
  }
  .btn{
	width: 100%;
    background-color: #f7f7f7;
	position: fixed;
	bottom: 0;
	z-index: 999;
  }
  .btn-content{
	padding: .213219rem .799573rem;
	height: 1.19936rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .btn-left{
	display: flex;
	align-items: center;
  }
  .download{
	margin-right: .533049rem;
  }
  .download,.collect{
	color: #af9c7c;
    font-size: .373134rem;
  }
  .download i,.collect i{
	font-size: .426439rem;
	vertical-align: bottom;
	margin-right: .133262rem;
  }
  .btn-right{
	padding: .213219rem .533049rem;
    border: .026652rem solid #a8a8a8;
    border-radius: .533049rem;
    font-size: .373134rem;
  }
  .btn-right i{
	vertical-align: middle;
	color: #333;
  }
  .btn-right span{
	display: inline-block;
	height: .533049rem;
	line-height: .533049rem;
	color: #333;
  }
  .player{
	width: 100%;
	background-color: #fff;
  }
  .player-content{
	width: 100%;
	height: 1.30597rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    color: #333;
    padding: 0 .799573rem;
  }
  .player-left span{
	font-size: .346481rem;
  }
  .player-right span:first-child,.player-right span:nth-child(2){
	width: .719616rem;
	height: .719616rem;
	display: inline-block;
	vertical-align: middle;
	margin-left: .533049rem;
  }
  .player-right span:first-child{
	background: url(../assets/z-qqyy/Album1/4.png) no-repeat;
    background-size: 100%;
  }
  .player-right span:nth-child(2){
	background: url(../assets/z-qqyy/Album1/5.png) no-repeat;
	background-size: 100%;
  }
</style>
